<script setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { fetchUsers, addUser, editUser, deleteUser } from '@/api/user';

// 用户列表
const users = ref([]);
const isDialogVisible = ref(false);  // 控制对话框显示状态
const isEdit = ref(false);  // 判断是否为编辑状态

// 当前编辑的用户
const form = reactive({
  id: null,
  username: '',
  password: '',
  role: '',
});

// 表单校验规则
const rules = reactive({
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  role: [{ required: true, message: '请输入角色', trigger: 'blur' }],
});

// 获取所有用户数据
const loadUsers = async () => {
  try {
    const response = await fetchUsers();
    users.value = response;
  } catch (error) {
    ElMessage.error('获取用户列表失败');
  }
};

// 添加/编辑用户
const handleSubmit = async () => {
  try {
    if (isEdit.value) {
      // 编辑用户
      await editUser({
        id: form.id,
        username: form.username,
        password: form.password,
        role: form.role,
      });
      ElMessage.success('用户更新成功');
    } else {
      // 添加用户
      await addUser({
        username: form.username,
        password: form.password,
        role: form.role,
      });
      ElMessage.success('用户添加成功');
    }
    loadUsers();  // 重新获取用户列表
    isDialogVisible.value = false;
  } catch (error) {
    ElMessage.error('操作失败');
  }
};

// 删除用户
const handleDelete = async (id) => {
  try {
    await ElMessageBox.confirm('确认删除该用户吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    });
    await deleteUser(id);
    ElMessage.success('用户删除成功');
    loadUsers();  // 重新获取用户列表
  } catch (error) {
    ElMessage.error('删除失败');
  }
};

// 打开添加用户对话框
const openAddDialog = () => {
  isEdit.value = false;
  form.id = null;
  form.username = '';
  form.password = '';
  form.role = '';
  isDialogVisible.value = true;
};

// 打开编辑用户对话框
const openEditDialog = (user) => {
  isEdit.value = true;
  form.id = user.id;
  form.username = user.username;
  form.password = user.password;
  form.role = user.role;
  isDialogVisible.value = true;
};

// 页面加载时获取用户列表
onMounted(loadUsers);
</script>

<template>
  <el-card>
    <el-button type="primary" @click="openAddDialog">添加用户</el-button>
    <el-table :data="users" style="width: 100%; margin-top: 20px;">
      <el-table-column prop="id" label="ID" width="50"></el-table-column>
      <el-table-column prop="username" label="用户名" width="150"></el-table-column>
      <el-table-column prop="password" label="密码" width="150"></el-table-column>
      <el-table-column  label="角色" width="100">
         <template #default="scope">{{ scope.row.role=== '0'? '管理员' : '普通用户' }}</template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button type="primary" @click="openEditDialog(scope.row)" size="small">编辑</el-button>
          <el-button type="danger" @click="handleDelete(scope.row.id)" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加/编辑用户的对话框 -->
    <el-dialog  v-model="isDialogVisible" title="用户信息">
      <el-form :model="form" :rules="rules" ref="formRef">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password"></el-input>
        </el-form-item>


        <el-form-item label="角色" prop="role">
          <el-select v-model="form.role" placeholder="请选择角色">
            <el-option label="管理员" value="0"></el-option>
            <el-option label="普通用户" value="1"></el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<style scoped>
.el-table {
  margin-top: 20px;
}
.dialog-footer {
  text-align: right;
}
</style>
